import {  useEffect,  } from 'react'
import echarts from 'echarts';

export default function LineChart(props) {
    const {jcdata,jjz}=props
    console.log("监测数据",jcdata)
    useEffect(() => {
        let XName = jcdata?.XName
        let data1 = jcdata?.data
        let Line = jcdata?.Line
        /* let color = jcdata.closr */
       /*  var XName = [11, 12, 13, 14, 15]
        var data1 = [
            [245, 78, 578, 342, 222],
            [63, 194, 234, 321, 1000],
            [53, 254, 234, 321, 118],
           
        ]
        var Line = ["库水位", "rhkk", "www"]; */
        var color = ['#00f8ff', '#00f15a', '#0696f9','#9996f9'];

        //数据处理
        var datas = [];
        Line?.map((item, index) => {
            datas?.push(
                {

                    name: item,
                    type: "line",
                    yAxisIndex: 1,
                    data: data1[index],
                    itemStyle: {
                        normal: {
                            //borderWidth: 5,
                            color: color[index],
                        }
                    },
                    markLine: {
                        data: [
                            {
                                yAxis:jjz.jcjjx?Number(jjz.jcjjx):500, // 在y轴上的位置为250
                                lineStyle: {
                                  color: 'red', // 标记线的颜色为红色
                                  width: 0.5, // 标记线的宽度
                                  type: 'dashed' // 实线
                                }
                            }
                        ],
                        
                    }
                }
            )
            return null;
        })
     

        let option = {
            resize: true,
            //backgroundColor: '#0e2147',
           
            grid: {
                left: '15%',
                top: '5%',
                bottom: '15%',
                right: '15%',
            },
            legend: {
                type: "scroll",
                data: Line,
                itemWidth: 10,
                itemHeight: 10,
                textStyle: {
                    color: "#00ffff",
                    fontSize: 10
                },
            },
            yAxis: [
                {
                    type: 'value',
                    position: 'right',
                    splitLine: {
                        show: false
                    }
                    ,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    
                },
                {
                    type: 'value',
                    position: 'left',
                    nameTextStyle: {
                        color: '#00FFFF'
                    },
                    
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(135,140,147,0.8)'
                        }
                    },
                    axisLine: {
                        show: true
                    },
                    axisTick: {
                        show: true,
                        length:2,
                        
                    },
                    axisLabel: {
                        formatter: '{value}',
                        color: '#fff',
                        fontSize: '15',
                        width:30,
                        overflow :'truncate',

                        
                    },
                    
                },
            ],
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#6A989E',
                        }
                    },
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',// x轴颜色
                            fontWeight: 'normal',
                            fontSize: '10',
                            lineHeight: 22,
                        }

                    },
                    nameTextStyle:{
                        overflow:'break',
                    },
                    data: XName,
                },
                
            ],
            series: datas
           
        }
        // 获取图表容器元素
        const chartContainer = document.getElementById('chart-container');

        // 创建图表实例
        var chart = echarts.init(chartContainer);

        // 使用配置项设置图表
        chart.setOption(option);

        // 在组件卸载时销毁图表实例
        return () => {
            chart.dispose();
        };
    }, [jcdata,jjz]);

    return <div id="chart-container" style={{ width: 350, height: 200,display: 'flex', justifyContent: 'center', alignItems: 'center' }}></div>;

}
